<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/nerveslider.css">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Work</h1>
					<h1 class="title">Full-Width Video Project</h1>
						<h1 class="intro">
							We are what we repeatedly do. <span>Excellence</span>, therefore, is not an <span class="hue">act</span>, but a habit. - Aristotle
						</h1>
						<div class="portfolio-links pad15">
							<a href="#"><span class="fa-stack fa-lg"><i class="fa fa-angle-left fa-stack-1x fa-inverse"></i></span></a> 
							<a href="#"><span class="fa-stack fa-lg"><i class="fa fa-angle-right fa-stack-1x fa-inverse"></i></span></a> 
						</div>
					</div>
				</div>
			</div>
			
	<div class="container wrapper">
		<div class="inner_content">
			<div class="row pad30">
				<div class="col-md-12">
					
					<!-- add your video, remove height and width settings-->
				<div class="vendor">
            <iframe src="http://player.vimeo.com/video/59653641?title=0&amp;byline=0&amp;portrait=0"></iframe>
          </div>
			</div>
				</div>
				
				<div class="row pad15">
					<div class="col-md-9 pad10">
						<h2><span>Case Study</span></h2>
							<p class="lead">
								Proin laoreet venenatis augue, eu commodo ligula fermentum at vestibulum ante ipsum. An cum viris reformidans. Vel id minim ludus definitionem, ei his mutat.
								Ridens invidunt ad duo. Cum no sale labores, vel vidisse.
							</p>
						
							<p>
								Suspendisse tempor leo at massa laoreet vel tincidunt leo molestie. Proin tristique accumsan nisl, quis sollicitudin urna ullam corper posuere cubilia curae vel. 
								Wullam ligula sapien, pharetra eget volutpat vel, consequat in lectus sed do. tincidunt leo molestie eiusmod tempor incididunt ut labore et dolore magna aliqua class 
								aptent taciti sociosqu ad litora torquent.
							</p>
						
							<p>
								Lorem ipsum dolor sit amet, modo cetero sit in, tota idque theophrastus vim te, qui erat assum ex. Ridens invidunt ad duo. Cum no sale labores, vel vidisse 
								eripuit suscipiantur id. Id albucius nominavi vix. Error laboramus usu ne, est primis repudiandae te.Amet augue eloquentiam ea nec. Quo utroque detraxit te, 
								cu natum iuvaret quaeque cum. Has dicta aperiri at, te labitur tincidunt sit, an vocent persius est.
							</p>
						</div> 
						
						<div class="col-md-3 pad20">
						  <h4><span>Services</span></h4>
								<ul class="fa-ul pad5">
									<li><i class="fa-li fa fa-globe colour"></i> Web Design</li>
									<li><i class="fa-li fa fa-pencil colour"></i> Graphic Design</li>
									<li><i class="fa-li fa fa-laptop colour"></i> Web Hosting</li>
								</ul>
						
								<div class="pad15"></div>
									<a href="#" class="btn btn-info btn-primary btn-custom">view website</a>  
									<div class="pad30"></div>
								</div>
							</div>
								</div>
									</div>
								
					<!--related projects-->	
						
			<div class="strip2">
				<h1>Related Projects</h1>
					<h3 class="center about_strip">
						Ecilisis venenatis risus, suspendisse ac nec et. Nulla sed mauris, congue duis proin nonummy. Elementum phasellus. Mauris sed nulla sed, 
						egestas feugiat a dictum libero  vivamus purus arcu, commodo cursus egestas et.
					</h3>
						
			<div class="container wrapper">
			<div class="inner_content col_full">
			
			<div id="slider_related">
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s1.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s1.jpg" alt=""/></a>
				</div> 
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s2.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s2.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s3.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s3.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s4.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s4.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s5.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s5.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s6.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s6.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s7.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s7.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s8.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s8.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			</div>
				<div id="sl-prev" class="widget-scroll-prev2"><i class="fa fa-chevron-left white"></i></div>
				<div id="sl-next" class="widget-scroll-next2"><i class="fa fa-chevron-right white but_marg"></i></div>
				</div>
			<!--//projects-->
				</div>
			</div>
		<!--//page-->
	
	<!--footer-->
	<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
				<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end-->  
				
<script src="js/jquery.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>	
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<!--carousel--> 
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
	$("#slider_related").carouFredSel({ width : "100%", height : "auto",
	responsive : true,  auto : false,
	items : { width : 230, visible: { min: 1, max: 5 }
	},
	swipe : { onTouch : true, onMouse : true },
	scroll: { items: 1, },
	prev : { button : "#sl-prev", key : "left"},
	next : { button : "#sl-next", key : "right" }
	});
});
//]]>
</script>

</body>
</html>
